<template>
  <div class="page">
    <el-upload
      :class="{ 'upload-class': elType == 'readonly' || fileList.length == 10 }"
      ref="upload"
      action="#"
      :http-request="(file) => handMethods('uploadFile', file)"
      list-type="picture-card"
      :file-list="fileList"
      :limit="limit"
      multiple
      :on-change="uploadChange"
      :disabled="disabled"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{ file }">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <!--        <span-->
          <!--            v-if="!disabled"-->
          <!--            class="el-upload-list__item-delete"-->
          <!--            @click="handleDownload(file)"-->
          <!--        >-->
          <!--          <i class="el-icon-download"></i>-->
          <!--        </span>-->
          <span
            v-if="elType != 'readonly'"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
      <div slot="tip" class="tips" v-if="elType != 'readonly'">
        建议尺寸：800*800像素，拖拽图片可以调整顺序，最多上传10张
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  name: 'Upload',
  props: {
    elType: {
      type: String,
      default: 'readonly',
    },
    limit: {
      type: Number,
      default: 10,
    },
    imgList: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: [],
    };
  },
  watch: {
    fileList: {
      handler(newval, oldval) {
        let data = { type: '', arr: newval };
        switch (true) {
          case newval.length > oldval.length:
            data.type = 'add';
            break;
          case newval.length < oldval.length:
            data.type = 'del';
            break;
          case newval.length == oldval.length:
            data.type = 'sort';
            break;
        }
        this.handMethods('fileSortChange', data);
      },
      deep: true,
    },
    imgList: {
      handler(val) {
        this.fileList = val;
      },
      deep: true,
    },
  },
  mounted() {
    this.elType != 'readonly' && this.initDragSort();
  },
  methods: {
    //覆盖默认上传事件
    handMethods(methodsName, val) {
      this.$emit(methodsName, val);
    },
    uploadChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter((item) => item.uid != file.uid);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // handleDownload(file) {
    //   console.log(file);
    // },
    // 支持拖拽排序
    initDragSort() {
      const el = this.$refs.upload.$el.querySelectorAll('.el-upload-list')[0];
      Sortable.create(el, {
        onEnd: ({ oldIndex, newIndex }) => {
          // 交换位置
          const arr = this.fileList;
          const page = arr[oldIndex];
          arr.splice(oldIndex, 1);
          arr.splice(newIndex, 0, page);
        },
      });
    },
  },
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.tips {
  font-size: 12px;
  color: #bbb;
  height: 25px;
  line-height: 25px;
}
.upload-class {
  /deep/ .el-upload.el-upload--picture-card {
    display: none;
  }
}
</style>
